{extend name="common/layout" /}

{block name="style"}
<style>
    /** 数据预览 **/
    .wait-preview .layui-card { border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, .08); }
    .wait-preview .subject { position: relative; padding: 20px; width: 100%; box-sizing: border-box; }
    .wait-preview .subject .icons { display: inline-block; vertical-align: middle; }
    .wait-preview .subject .icons img { width: 60px; }
    .wait-preview .subject .textarea { display: inline-block; vertical-align: middle; padding-left: 20px; }
    .wait-preview .subject .stat-text { padding-bottom: 5px; font-size: 24px; color: #455a64; }
    .wait-preview .subject .stat-heading { color: #99abb4; }
    .wait-data-view { height: 332px !important; }
    .wait-data-view > *[carousel-item]::before { display: none; }
    .wait-data-view > *[carousel-item] > div { height: 332px; }

    @media screen and (max-width: 768px) {
        .wait-preview .subject .icons img { width: 50px; }
        .wait-preview .subject .stat-text { font-size: 22px; }
        .wait-preview .subject .textarea { padding-left: 15px; }
    }

    /* 快捷方式 */
    .wait-shortcut li { text-align: center; }
    .wait-shortcut li .layui-icon { display: inline-block; width: 100%; height: 60px; font-size: 30px; border-radius: 2px; text-align: center; color: #333333; background-color: #f8f8f8; transition: all 0.3s; transition: all 0.3s; line-height: 60px; }
    .wait-shortcut li cite { position: relative; top: 2px; display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; color: #666666; }
    .wait-shortcut li:hover .layui-icon { background-color: #f2f2f2; }
    .wait-shortcut li a { display: block; }

    /* 待办事项 */
    .wait-backlog ul li a { display: block; padding: 10px 15px; border-radius: 2px; color: #999999; background-color: #f8f8f8; transition: all 0.3s; }
    .wait-backlog ul li a h3 { padding-bottom: 10px; font-size: 13px; }
    .wait-backlog ul li a p cite { font-style: normal; font-size: 30px; font-weight: 400; color: #009688; line-height: 1; }
    .wait-backlog ul li a:hover { color: #888888; background-color: #f2f2f2; }

    /* 热门排名 */
    .wait-ranking.layui-card-body { min-height: 333px; }
    .wait-ranking .li { display: flex; align-items: center; }
    .wait-ranking .li img { width: 30px; height: 30px; }
    .wait-ranking .li p { margin-left: 5px; height: 20px; }
    .wait-ranking .tips { display: block; width: 25px; height: 25px; font-size: 12px; font-weight: 400; border-radius: 2px; text-align: center; color: #333333; background: #f5f5f5; line-height: 25px; }
    .wait-ranking table tr:nth-child(1) .tips { color: rgb(255 255 255); background: rgb(248 96 86); }
    .wait-ranking table tr:nth-child(2) .tips { color: rgb(255 255 255); background: rgb(252 141 46); }
    .wait-ranking table tr:nth-child(3) .tips { color: rgb(255 255 255); background: rgb(252 188 46); }
</style>
{/block}

{block name="body"}
<div class="container">
    <div class="layui-row layui-col-space15 wait-preview">
        <!-- 今日收益 -->
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="subject">
                    <div class="icons"><img src="__BACKEND__/images/console/home-01.png" alt="none"></div>
                    <div class="textarea">
                        <div class="stat-text">10</div>
                        <div class="stat-heading">今日收益</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 今日流量 -->
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="subject">
                    <div class="icons">
                        <img src="__BACKEND__/images/console/home-02.png" alt="none">
                    </div>
                    <div class="textarea">
                        <div class="stat-text">60</div>
                        <div class="stat-heading">今日流量</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 文章数量 -->
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card ">
                <div class="subject">
                    <div class="icons">
                        <img src="__BACKEND__/images/console/home-03.png" alt="none">
                    </div>
                    <div class="textarea">
                        <div class="stat-text">30</div>
                        <div class="stat-heading">文章数量</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 用户数量 -->
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="subject">
                    <div class="icons">
                        <img src="__BACKEND__/images/console/home-04.png" alt="none">
                    </div>
                    <div class="textarea">
                        <div class="stat-text">40</div>
                        <div class="stat-heading">用户数量</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <!-- 【左侧侧区块】 -->
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <!-- 快捷方式 -->
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">快捷方式</div>
                        <div class="layui-card-body">
                            <div class="wait-shortcut">
                                <ul class="layui-row layui-col-space10 quick-event">
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('content.article/index')}">
                                            <i class="layui-icon layui-icon-read"></i>
                                            <cite>内容</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('system.attach/index')}">
                                            <i class="layui-icon layui-icon-carousel"></i>
                                            <cite>附件</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('auth.admin/index')}">
                                            <i class="layui-icon layui-icon-user"></i>
                                            <cite>管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('auth.menu/index')}">
                                            <i class="layui-icon layui-icon-transfer"></i>
                                            <cite>菜单</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('system.crontab/index')}">
                                            <i class="layui-icon layui-icon-find-fill"></i>
                                            <cite>任务</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('system.log/index')}">
                                            <i class="layui-icon layui-icon-templeate-1"></i>
                                            <cite>日志</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('setting.watermark/index')}">
                                            <i class="layui-icon layui-icon-water"></i>
                                            <cite>水印</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lay-attr="{:route('setting.basics/index')}">
                                            <i class="layui-icon layui-icon-set"></i>
                                            <cite>设置</cite>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 待办事项 -->
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">待办事项</div>
                        <div class="layui-card-body">
                            <div class="wait-backlog">
                                <ul class="layui-row layui-col-space10 quick-event">
                                    <li class="layui-col-xs6">
                                        <a lay-attr="{:route('setting.basics/index')}">
                                            <h3>待发货订单</h3>
                                            <p><cite>90</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a lay-attr="{:route('setting.basics/index')}">
                                            <h3>待核销订单</h3>
                                            <p><cite>10</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a lay-attr="{:route('setting.basics/index')}">
                                            <h3>待处理售后</h3>
                                            <p><cite>0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a lay-attr="{:route('setting.basics/index')}">
                                            <h3>待回复评论</h3>
                                            <p><cite>0</cite></p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 数据概览 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">
                            <div class="layui-carousel wait-carousel wait-data-view" data-anim="fade"
                                 lay-filter="echarts">
                                <div carousel-item id="echarts">
                                    <div><i class="layui-icon layui-icon-loading1"></i></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 【右侧区块】 -->
        <div class="layui-col-md4">
            <!-- 版本信息 -->
            <div class="layui-card">
                <div class="layui-card-header">版本信息</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table" style="margin-top: 3px;">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>当前版本</td>
                            <td>v{$detail.version}<a href="https://www.waitadmin.cn/docs/php/history.html" target="_blank" style="padding-left: 15px;">更新日志</a></td>
                        </tr>
                        <tr>
                            <td>基于框架</td>
                            <td>ThinkPHP8 + Layui-2.9.x</td>
                        </tr>
                        <tr>
                            <td>主要特色</td>
                            <td>零门槛 / 开源 / 清爽 / 极简</td>
                        </tr>
                        <tr>
                            <td>获取渠道</td>
                            <td style="padding-bottom: 0;">
                                <div class="layui-btn-container">
                                    <a href="https://gitee.com/wafts/waitadmin-php" target="_blank" class="layui-btn layui-btn-danger" style="height:30px; line-height:30px;">Gitee</a>
                                    <a href="https://www.waitadmin.cn" target="_blank" class="layui-btn" style="height:30px; line-height:30px;">官方网站</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 热门排行 -->
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">热门排行</div>
                <div class="layui-card-body wait-ranking" style="overflow-y: auto;">
                    <table class="layui-table" lay-skin="line" lay-size="sm">
                        <colgroup>
                            <col width="55">
                            <col>
                            <col width="55" style="min-width: 55px;">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>标题</th>
                            <th style="text-align:center;">阅读</th>
                        </tr>
                        </thead>
                        <tbody>
                            {volist name="$detail['article']" id="vo" key="k"}
                                <tr>
                                    <td><span class="tips">{$k}</span></td>
                                    <td>
                                        <div class="li">
                                            {if $vo.image}
                                                <img src="{$vo.image}" alt="img">
                                            {/if}
                                            <p class="overflow-1">{$vo.title}</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="overflow-1" style="text-align:center;">{$vo.browse}</p>
                                    </td>
                                </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    //区块轮播切换
    layui.use(['element', 'carousel'], function () {
        let $ = layui.$;
        let carousel = layui.carousel;
        let element = layui.element;
        let device = layui.device();

        $('.layui-carousel').each(function () {
            let that = $(this);
            carousel.render({
                elem: this
                ,width: '100%'
                ,arrow: 'none'
                ,interval: that.data('interval')
                ,autoplay: that.data('autoplay') === true
                ,trigger: (device.ios || device.android) ? 'click' : 'hover'
                ,anim: that.data('anim')
            });
        });
        element.render('progress');
    });

    // 快捷事件
    layui.$(document).on('click', '.quick-event li a', function () {
        let $ = layui.$;
        let layAttr = $(this).attr('lay-attr');
        let layText = $(this).find('cite').text();
        if ($(this).find('h3').length>0) {
            layText = $(this).find('h3').text();
        }
        if (!layAttr) {
            return true;
        }
        waitUtil.popup({
            title: layText,
            url: layAttr,
            area: ['95%', '95%'],
            success: function (layero, index) {}
        });
    });

    //数据概览
    layui.use(['carousel', 'echarts'], function () {
        let $ = layui.$
            ,carousel = layui.carousel
            ,echarts = layui.echarts;

        let echartsApp = [], options = [
            //今日流量趋势
            {
                title: {
                    text: '今日流量趋势',
                    x: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['', '']
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: 'PV',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
                    data: [111, 222, 333, 444, 555, 666, 3333, 33333, 55555, 66666, 33333, 3333, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1666, 999, 888, 777]
                }, {
                    name: 'UV',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
                    data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12666, 3333, 333, 666, 1188, 2666, 3888, 6666, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
                }]
            },

            //访客浏览器分布
            {
                title: {
                    text: '访客浏览器分布',
                    x: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['Chrome', 'Firefox', 'IE 8.0', 'Safari', '其它浏览器']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 9052, name: 'Chrome' },
                        { value: 1610, name: 'Firefox' },
                        { value: 3200, name: 'IE 8.0' },
                        { value: 535, name: 'Safari' },
                        { value: 1700, name: '其它浏览器' }
                    ]
                }]
            },

            //新增的用户量
            {
                title: {
                    text: '最近一周新增的用户量',
                    x: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: { //提示框
                    trigger: 'axis',
                    formatter: "{b}<br>新增用户：{c}"
                },
                xAxis: [{ //X轴
                    type: 'category',
                    data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
                }],
                yAxis: [{  //Y轴
                    type: 'value'
                }],
                series: [{ //内容
                    type: 'line',
                    data: [200, 300, 400, 610, 150, 270, 380],
                }]
            }
        ]
            ,elemDataView = $('#echarts').children('div')
            ,renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            window.onresize = echartsApp[index].resize;

        };
        //没找到DOM，终止执行
        if (!elemDataView[0]) return;
        renderDataView(0);

        //监听数据概览轮播
        let carouselIndex = 0;
        carousel.on('change(echarts)', function (obj) {
            renderDataView(carouselIndex = obj.index);
        });

    });
</script>
{/block}